<template>
  <view class="page">
    <view class="page-ctx">
      <view class="product-info">
        <view class="product-item flex">
          <view class="poster-box">
            <image :src="product.image" mode="aspectFill"></image>
          </view>
          <view class="info">
            <view class="title-box">
              <view class="title ellipsis-2">
                {{ product.title }}
              </view>
            </view>

            <view class="desc-box">
              <view class="desc ellipsis-1">
                {{ product.keyVals }}
              </view>
            </view>

            <view class="price-box flex-between">
              <view class="price-info">{{ product.priceSale || 0 }}积分</view>
              <text class="num">x {{ product.num }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="type-info">
        <view class="main-title">请选择售后类型：</view>
        <view class="type-list flex">
          <view
            class="type-item flex-center"
            v-for="(item, index) in typeList"
            :key="index"
            @click="toRefundType(item)">
            {{ item.title }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: "",
      inventoryId: "",
      product: {},
      //退换货类型(1-退款 2-退货退款 3-换货)
      typeList: [
        {
          title: "仅退款",
          value: 1,
          path: "/refund-submit", //refund-for-money
        },
        {
          title: "退货退款",
          value: 2,
          path: "/refund-submit", //refund-for-return
        },
        {
          title: "换货",
          value: 3,
          path: "/refund-submit", //refund-for-return
        },
      ],
    };
  },

  onLoad(option) {
    this.orderId = option.orderId;
    this.inventoryId = option.inventoryId;
    this.setView();
  },
  methods: {
    setView() {
      this.query_order();
    },
    query_order() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_detail",
          id: this.orderId,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.product = data.products.find((v) => v.id == this.inventoryId);
        }
      });
    },

    toRefundType(item) {
      this.toRoute({
        // mode: 'redirectTo',
        path: item.path,
        query: {
          orderId: this.orderId,
          inventoryId: this.inventoryId,
          type: item.value,
          title: item.title,
          // productId: this.product.productId,
          // buyNumber: this.product.num,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .page-ctx {
    padding: 24rpx 32rpx;
  }
}

.product-info {
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.product-item {
  padding: 40rpx 24rpx;

  & + .product-item {
    border-top: 1rpx solid #eee;
  }

  .poster-box {
    width: 176rpx;
    height: 176rpx;
    border-radius: 8rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    flex: 1;
    overflow: hidden;
    padding-left: 24rpx;

    .title-box {
    }

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      line-height: 1.5;
    }

    .desc-box {
      margin-top: 4rpx;

      .desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
    }

    .price-box {
      margin-top: 18rpx;

      .price-info {
        font-weight: bold;
        font-size: 28rpx;
        color: #e23410;
      }

      .num {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }
    }
  }
}

.type-info {
  margin-top: 24rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 40rpx 24rpx;

  .main-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }

  .type-list {
    margin-top: 26rpx;

    .type-item {
      flex: 1;
      height: 72rpx;
      background: #f6f6f6;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;

      & + .type-item {
        margin-left: 16rpx;
      }
    }
  }
}
</style>
